<template>
  <div class="display-container">
    <div class="result-select-section">
      <h3>选择预测结果</h3>
      <el-select v-model="selectedResult" placeholder="请选择预测结果" @change="handleResultSelect">
        <el-option v-for="result in predictionResults" :key="result.id" :label="result.name" :value="result.id" />
      </el-select>
    </div>

    <div class="chart-section" v-if="selectedResult">
      <div class="chart-controls">
        <el-radio-group v-model="chartType" @change="updateChart">
          <el-radio-button label="line">折线图</el-radio-button>
          <el-radio-button label="bar">柱状图</el-radio-button>
          <el-radio-button label="heatmap">热力图</el-radio-button>
        </el-radio-group>
      </div>

      <div class="chart-container">
        <div ref="chartRef" style="width: 100%; height: 500px;"></div>
      </div>

      <div class="metrics-section">
        <h3>预测指标</h3>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="MAE">{{ metrics.mae }}</el-descriptions-item>
          <el-descriptions-item label="MSE">{{ metrics.mse }}</el-descriptions-item>
          <el-descriptions-item label="RMSE">{{ metrics.rmse }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

const selectedResult = ref('')
const predictionResults = ref([])
const chartType = ref('line')
const chartRef = ref(null)
const metrics = ref({ mae: 0, mse: 0, rmse: 0 })
let chart = null

// 获取预测结果列表
const fetchPredictionResults = async () => {
  try {
    const response = await fetch('http://localhost:3000/api/predictions')
    const data = await response.json()
    if (data.success) {
      predictionResults.value = data.results
    }
  } catch (error) {
    ElMessage.error('获取预测结果列表失败')
  }
}

// 选择预测结果时的处理
const handleResultSelect = async (resultId) => {
  try {
    const response = await fetch(`http://localhost:3000/api/predictions/${resultId}`)
    const data = await response.json()
    if (data.success) {
      metrics.value = data.metrics
      updateChart(chartType.value, data.predictions)
    }
  } catch (error) {
    ElMessage.error('获取预测结果详情失败')
  }
}

// 更新图表
const updateChart = (type, data = null) => {
  if (!chart || !data) return

  const option = {
    title: {
      text: '预测结果可视化'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['实际值', '预测值']
    },
    xAxis: {
      type: 'category',
      data: data.timePoints
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '实际值',
        type: type === 'bar' ? 'bar' : 'line',
        data: data.actual
      },
      {
        name: '预测值',
        type: type === 'bar' ? 'bar' : 'line',
        data: data.predicted
      }
    ]
  }

  if (type === 'heatmap') {
    // 热力图配置
    option.series = [{
      type: 'heatmap',
      data: data.heatmapData,
      label: {
        show: true
      }
    }]
  }

  chart.setOption(option)
}

onMounted(() => {
  fetchPredictionResults()
  if (chartRef.value) {
    chart = echarts.init(chartRef.value)
  }
})

onUnmounted(() => {
  if (chart) {
    chart.dispose()
  }
})
</script>

<style lang="scss" scoped>
.display-container {
  padding: 20px;
}

.result-select-section {
  margin-bottom: 30px;
}

.chart-section {
  .chart-controls {
    margin-bottom: 20px;
  }

  .chart-container {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}

.metrics-section {
  margin-top: 30px;
}
</style> 